<template>
    <div class="transfer_peding" @click="popover_show = false">
        <img src="@/assets/image/tr1.png" alt="" class="status_img">
        <div class="status_text">{{ $t('msg.待你收款') }}</div>
        <div class="value">￥{{ transfer.amount }}</div>
        <div class="form_item" v-if="transfer.code.length">
            <div class="key">{{ $t('login.请输入验证码') }}</div>
            <input type="text" v-model="code" :placeholder="$t('msg.收款验证码')">
        </div>
        <div class="time">{{ $t('msg.转账时间') }} {{ formatTime(transfer.createtime) }}</div>
        <div class="submit" @click="submit">{{ $t('msg.收款') }}</div>

        <div class="tips">
            <span>24 {{ $t('msg.小时内未收款，将退还给对方') }}</span>
            <div>
                <el-popover placement="right" trigger="manual" v-model="popover_show">
                    <div class="transfer_popover">
                        <div class="popover_header">{{ $t('msg.退还转账') }}</div>
                        <div class="popover_tips">{{ $t('msg.您确定要退还转账吗') }}</div>
                        <div class="popover_footer">
                            <el-button type="primary" @click.stop="sure_refund">{{ $t('live.确定') }}</el-button>
                            <el-button type="primary" plain @click.stop="popover_show = false">
                                {{ $t('chat.取消') }}
                            </el-button>
                        </div>
                    </div>
                    <div class="refund" slot="reference" @click.stop="popover_show = true">{{ $t('msg.退还') }}</div>
                </el-popover>
            </div>
        </div>
    </div>
</template>
<script>
import dayjs from 'dayjs'
export default {
    props: {
        id: {
            type: [Number, String],
            default: ""
        }
    },
    data() {
        return {
            code: "",
            transfer: {
                code: ""
            },

            popover_show: false
        };
    },
    async created() {
        let res = await this.$api.chatApi.transferDetail({
            transfer_id: this.id
        });
        this.transfer = res.transfer;
    },
    methods: {
        formatTime(timestamp) {
            return timestamp ? dayjs.unix(timestamp).format('YYYY-MM-DD HH:mm:ss') : 'N/A';
        },
        async submit() {
            await this.$api.chatApi.receiveDelayTransfer({
                transfer_id: this.id,
                code: this.code,
                transfer_status: 2
            })
            this.$emit('ok');
        },
        async sure_refund() {
            await this.$api.chatApi.refund({
                transfer_id: this.id,
                transfer_status: 3
            })
            this.$message({
                type: "success",
                message: this.$t('msg.退款成功')
            });
            this.popover_show = false;
            this.$emit('ok');
        }
    }
}
</script>
<style lang="scss">
.transfer_popover {
    width: 400px;
    height: 278px;
    padding: 24px;
    box-sizing: border-box;
    background: #FFFFFF;
    border-radius: 4px 4px 4px 4px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;


    .popover_header {
        text-align: center;
        font-weight: bold;
        font-size: 18px;
        color: #333333;
        padding-bottom: 16px;
    }

    .popover_tips {
        font-size: 16px;
        color: #333333;
    }

    .popover_footer {
        margin-top: 48px;
        display: flex;
        justify-content: center;

        .el-button {
            width: 118px;
            height: 32px;
        }
    }
}
</style>
<style lang="scss" scoped>
.transfer_peding {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    .status_img {
        width: 72px;
        height: 72px;
    }

    .status_text {
        font-size: 18px;
        color: #333333;
        margin: 8px 0 20px;
    }

    .value {
        font-size: 32px;
        color: #333333;
    }

    .form_item {
        width: 100%;
        height: 88px;
        background: #F5F5F5;
        border-radius: 8px 8px 8px 8px;
        margin: 50px 0 16px;
        padding: 12px 0;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-between;

        .key {
            font-size: 14px;
            color: #7F7F7F;
        }

        input {
            width: 78px;
            height: 34px;
            text-align: center;
            border: none;
            border-bottom: 1px solid #EDEDED;
            outline: none;
            font-size: 16px;
            color: #FF904A;
            background: #F5F5F5;
        }

        .oper {
            display: flex;
            justify-content: center;
            align-items: center;

            span {
                font-size: 16px;
                color: #FF904A;
                margin: 0 22px;
            }
        }
    }

    .time {
        font-size: 14px;
        color: #333333;
    }

    .submit {
        width: 224px;
        height: 48px;
        line-height: 48px;
        text-align: center;
        background: #2273FF;
        border-radius: 8px 8px 8px 8px;
        margin: 120px 0 30px;
        font-size: 14px;
        color: #FFFFFF;
        cursor: default;
    }

    .tips {
        display: flex;
        align-items: center;

        span {
            flex: 1;
            font-size: 14px;
            color: #333333;
            text-align: center;
        }

        .refund {
            padding: 0 5px;
            // box-sizing: border-box;
            color: #697494;
            font-size: 14px;
            cursor: pointer;
        }
    }
}
</style>